<template>
    <div style="width:100%;height:100%;padding:4px;" class="divs">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-light" style="margin-left:10px;">
                    <div class="button">
                        <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">添加广告</el-button>
                        <el-button type="danger" icon="el-icon-delete">批量删除</el-button>
                        <span style="margin-right:20px;">共：1997个</span>
                    </div>
                    <div style="width:100%;border:1px solid #ccc;">
                        <el-table
                        ref="multipleTable"
                        :data="infos"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                        >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="img" label="图片" show-overflow-tooltip>
                        <template slot-scope="scope"><img :src="scope.row.slideshowPhotos" alt="" style="width:100px;" @click="pic(scope.row)"></template>
                        </el-table-column>
                        <el-table-column prop="type" label="分类" width="120">
                        <template slot-scope="scope">{{scope.row.type}}</template>
                        </el-table-column>
                        <el-table-column prop="src" label="商品ID" show-overflow-tooltip>
                        <template slot-scope="scope">{{scope.row.slideshowPhotoID}}</template>
                        </el-table-column>
                        <el-table-column prop="state" label="状态" show-overflow-tooltip>
                        <template slot-scope="scope"><span style="display:inline-block;width:50px;height:20px;background:#afa;text-align:center;line-height:20px;" v-if="scope.row.flag">{{scope.row.status}}</span><span style="display:inline-block;width:50px;height:20px;background:#ccc;text-align:center;line-height:20px;" v-else>已禁用</span></template>
                        </el-table-column>
                        <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            <el-button
                            size="mini"
                            type="success"
                            @click="handleHide(scope.$index, scope.row)"><span v-if="scope.row.flag">已启用</span><span v-else>已禁用</span></el-button>
                        </template>
                        </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </el-row>
            <div class="block" ref="header" style="height:100%;">
                <el-carousel height="100%" class="block_div">
                    <el-carousel-item v-for="(item,index) in arr" :key="index">
                        <span style="color:white;background:#000;font-size:40px;positon:absolute;right:10px;" @click="close">X</span>
                        <img :src="item.src" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
        
            <el-dialog
            title="添加轮播图"
            :visible.sync="dialogVisible"
            width="30%"
            >
            <el-upload
            style="border:1px dotted #ccc;width:185px;"
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
            </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData: [],
            multipleSelection: [],
            total:0,
            arr:[],
            dialogVisible: false,
            imageUrl: '',
            infos:[]
        }
    },
    created(){
        this.$api.$get("/GetSlideshow").then((res)=>{
            console.log(res.data)
            this.infos = res.data
        })
    },
    methods: {
        pic(res){
            console.log(res)
            this.$refs.header.style.display="block";
            this.arr=[res,...this.infos]
            console.log(this.arr)
        },
        close(){
            this.$refs.header.style.display="none";
            this.arr=[]
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleDelete(index,row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
            });          
        });
            console.log(index,row)
        },
        handleHide(index,row){
            console.log(row)
            this.$confirm('此操作将永久隐藏该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.$message({
                    type: 'success',
                    message: '隐藏成功!'
                });
                row.flag=!row.flag
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消隐藏'
            });          
        });
            console.log(index,row)
        },
            handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
}
</script>
<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}
.bg-purple {
    background: #fff;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    margin: 0;
}
.el-carousel__container{
    height: 100%;
}
.el-carousel__item:nth-child(2n) {
    background-color: #000;
    opacity: 0.9;

}

.el-carousel__item:nth-child(2n+1) {
    background-color: #000;
    opacity: 0.9;
}
ul{
    border:1px solid #ccc;
    div{
        color:#fff;
        text-align: center;
        background:skyblue;
        height: 60px;
        line-height: 60px;
    }
    li{
        line-height: 60px;
        i{
            color: orange;
        }
    }
}
.button{
    border:1px solid #CCC;
    width:100%;
    span{
        float:right;
        font-weight: bold;
        line-height: 35px;
    }
}
.divs{
    position: relative;
}
.block{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0px;
    z-index: 10;
    display: none;
    .block_div{
        width: 100%;
        height:100%;
        position: relative;
        img{
            width: 100%;
            margin-top:110px;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            z-index: 10;
        }
    }
}
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>